import{
    mainBtn,
    task,
    trashBtn,
    allFinish,
    allDel,
    mainCon,
    addCon,
    trashCon,
    allDelFover,
    allRestore, 
    ban,
    allow,
    showMainCon,
    showAddCon,
    showTrashCon,
    showMainBtn,
    showAddBtn,
    showTrashBtn,
    display,
    addList,
    allLi,
    navOpen,
    navClose,
    trashList

}from './base.js'



let switches = document.querySelectorAll('.switch')
let mainHeadTxt = document.querySelector('.main-head p')
let add = document.querySelector('.add')
let add_input = document.querySelector('.add-input')
let btnSub = document.querySelector('.submit')



//侧边栏按钮点击事件
mainBtn.addEventListener('click',()=>{
    showMainCon()
    showMainBtn()
})
task.addEventListener('click',()=>{
    showAddCon()
    showAddBtn()
})
trashBtn.addEventListener('click', ()=>{
    renderTrash(); // 每次打开时重新渲染
    showTrashBtn()
    showTrashCon()
});
//侧导航栏样式切换
//利用foreach给每一个switch添加事件监听
switches.forEach((btnSwitch)=>{
    btnSwitch.addEventListener('click', ()=>{
        if (navClose.style.display === 'block') {
            navClose.style.display = 'none'
            navOpen.style.display = 'block'
        } else {
            navClose.style.display = 'block'
            navOpen.style.display = 'none'
        }
    });
});

//给mainHead添加双击事件监听
mainHeadTxt.addEventListener('dblclick',function(){

    //可编辑状态设为true
    this.contentEditable = true
    this.focus()
    this.classList.add('thin')
})
mainHeadTxt.addEventListener('keydown', function (event) {
    // 当按下回车键时
    if (event.key === 'Enter'){

        // 阻止默认的换行行为
        event.preventDefault()

        // 将元素设置为不可编辑状态
        this.contentEditable = false
    }
});

// 为元素添加失去焦点事件监听器
mainHeadTxt.addEventListener('blur', function () {
    // 将元素设置为不可编辑状态
    this.contentEditable = false
    this.classList.remove('thin')
});

//文本框获取焦点时失去阴影
add_input.addEventListener('focus',function(){
    add.classList.remove('shadow')
})
add_input.addEventListener('blur',function(){
    add.classList.add('shadow')
})




// 新增待办事项函数
function loadData() {
    const storedData = localStorage.getItem('todoList');
    if (storedData) {
        const todoList = JSON.parse(storedData);
        todoList.forEach(item => {
            const newLi = createListItem(item.text, item.isFinished);
            addList.insertBefore(newLi, addList.firstChild);
        });
    }
}
// 创建列表项
function createListItem(text, isFinished = false) {
    let newLi = document.createElement('li');
    newLi.innerHTML = `
        <span class="finish"><i class="iconfont icon-duigou" style="display: none;"></i></span>
        <span class="text">${text}</span>
        <span class="delete"><i class="iconfont icon-a-guanbicuowu"></i></span>
    `;

    let del = newLi.querySelector('.delete');
    let finish = newLi.querySelector('.finish');
    let children = finish.getElementsByTagName('i');
    let textSpan = newLi.querySelector('.text');
    let iconDel = del.querySelector('i');

    if (isFinished) {
        textSpan.classList.add('strikethrough');
        children[0].style.display = 'inline';
        finish.style.backgroundColor = 'rgb(86, 89, 245)';
        newLi.style.backgroundColor = '#e8d2ff';
    }

    // 删除待办项 
    let removeHandler = function () {
        moveToTrash(newLi);
        saveData();
        display();
    };
    del.addEventListener('click', removeHandler);

    // 双击待办项可修改
    newLi.addEventListener('dblclick', function () {
        // 如果是已读状态，直接返回
        if (textSpan.classList.contains('strikethrough')) 
            return;
        else{
            // 进入编辑状态
            textSpan.contentEditable = true;
            textSpan.focus();

            // 切换按钮为“保存”状态
            del.classList.remove('delete');
            del.classList.add('OK');
            iconDel.classList.remove('icon-a-guanbicuowu');
            iconDel.classList.add('icon-shangchuan');

            // 移除原来的删除事件
            del.removeEventListener('click', removeHandler);
        }
    });

    // 绑定保存事件,用于修改待办项
    let saveHandler = ()=>{
        textSpan.contentEditable = false;
        del.classList.remove('OK');
        del.classList.add('delete');
        iconDel.classList.remove('icon-shangchuan');
        iconDel.classList.add('icon-a-guanbicuowu');


        // 重新绑定删除事件?
        del.addEventListener('click', removeHandler);


        saveData();
    };
    
    textSpan.addEventListener('blur', function () {
        if(textSpan.innerHTML ===''){
            alert("不能输入空内容哦！")
        }else{
            saveHandler() 
        }
    });
    textSpan.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            saveHandler();
        }
    });
    //绑定保存事件
    del.addEventListener('click', saveHandler);
    
    // 单个内容已读
    finish.addEventListener('click', function () {
        if(textSpan.classList.contains('strikethrough')){
            textSpan.classList.remove('strikethrough');
            // 显示对号并使标签变色
            children[0].style.display = 'none';
            finish.style.backgroundColor = 'white';
            newLi.style.backgroundColor = '#cd9aff';
            saveData();
        }else{
            textSpan.classList.add('strikethrough');
            // 显示对号并使标签变色
            children[0].style.display = 'inline';
            finish.style.backgroundColor = 'rgb(86, 89, 245)';
            newLi.style.backgroundColor = '#e8d2ff';
            saveData();
        }  
    });

    return newLi;
}

// 保存数据到本地存储
function saveData() {
    const todoList = [];
    const allLi = addList.getElementsByTagName('li');
    for (let i = 0; i < allLi.length; i++) {
        const text = allLi[i].querySelector('.text').textContent;
        const isFinished = allLi[i].querySelector('.text').classList.contains('strikethrough');
        todoList.push({ text, isFinished });
    }
    localStorage.setItem('todoList', JSON.stringify(todoList));
}

function addLi() {
    if (add_input.value.trim() === '') {
        alert("想想今天要干嘛吧!");
        add_input.value = '';
    } else {
        // 在内存中创建一个新节点
        const newLi = createListItem(add_input.value);
        addList.insertBefore(newLi, addList.firstChild);

        // 清空输入框
        add_input.value = '';

        saveData();
    }
    display(); // 添加后检查页面状态
}
window.addEventListener('load', ()=>{
    loadData()
    display()
});
//全部删除
allDel.addEventListener('click',function(){
    let conf = confirm("确定清除全部吗？")

    if(conf){
        while(allLi.length>0){  //只要allLi不为空
            moveToTrash(allLi[0])  //删除第一个li
        }
    }
    localStorage.removeItem('todoList')
    display()//检查页面显示状态
})

//全部已读
allFinish.addEventListener('click',function(){
    let e = confirm("全部标为已读吗？")
    if(e){
        for(let i = 0;i<allLi.length;i++){
            let Li = allLi[i]
            let text = Li.querySelector('.text')
            let finish = Li.querySelector('.finish')
            let children = Li.getElementsByTagName('i')
    
            text.classList.add('strikethrough')
            //显示对号并使标签变色
            children[0].style.display = 'inline'
            finish.style.backgroundColor = 'rgb(86, 89, 245)'
            Li.style.backgroundColor = '#e8d2ff'
        }
    } 
})

//提交
btnSub.addEventListener('click',function(){
    addLi()
})

add_input.addEventListener('keydown', function(event){
    // 当按下回车键时
    if (event.key === 'Enter'){
        
        // 阻止默认的换行行为
        event.preventDefault()
        addLi()
        add_input.value = ''
    }
})


//回收站功能

// 初始化回收站相关元素

// 从本地存储加载回收站数据（没有则初始化空数组）
//JSON.parse:将符合json格式的字符串转化成对象

let trashItems = JSON.parse(localStorage.getItem('trash')) || [];

// ========== 核心功能 ========== //

// 功能1: 将任务移动到回收站
function moveToTrash(taskElement) {
  // 1. 收集任务信息
  const taskData = {
    id: Date.now(), // 使用时间戳作为唯一ID
    content:taskElement.querySelector('.text').innerText,
    deletedTime: new Date().toLocaleString(),
    html: taskElement.outerHTML // 直接保存原始HTML结构
  };

  // 2. 添加到回收站数组
  trashItems.unshift(taskData);
  
  // 3. 更新本地存储
  saveToLocalStorage();
  
  // 4. 从界面移除原任务
  taskElement.remove();
}

// 功能2: 渲染回收站内容
function renderTrash() {
  trashList.innerHTML = ''; // 清空当前内容
  
  // 循环生成每个回收站项目
  trashItems.forEach((item,index) => {
    const newTrashLi = document.createElement('li');
    newTrashLi.className = 'trash-item';
    newTrashLi.innerHTML = `  
        <button class="restore-btn"><i class="iconfont icon-huifu RES" data-num=${index}></i></button>
        <p>${item.content}</p>
        <small>${item.deletedTime}</small>
        <button class="delete-forever"><i class="iconfont icon-a-guanbicuowu DEL"></i></button>
    `;
    trashList.appendChild(newTrashLi);
  });
}

// 功能3: 保存到本地存储
function saveToLocalStorage() {
    localStorage.setItem('trash', JSON.stringify(trashItems));//trashItems是对象类型，但localStorage中只能存储字符串，这里注意转换，取出的话还需要使用JSON.parse解析回来
}

// 回收站项目操作事件（使用事件委托）
trashList.addEventListener('click', function(e) {

    const itemElement = e.target.closest('.trash-item');
    //  Array.from()：将类数组对象转化为数组对象以使用数组方法，indexof()：数组方法，用于返回某个元素在数组中的索引位置
    const index = Array.from(trashList.children).indexOf(itemElement);
    
    //恢复

    if (e.target.classList.contains('RES')) {
        // 1. 获取原始HTML
        const originalHTML = trashItems[index].html;
    
        // 2. 重新插入到任务列表
        const tempLi = document.createElement('li');
        tempLi.innerHTML = originalHTML;
    
        const restoredTask = tempLi.firstElementChild;//插入原列表头部
        restoredTask.classList.className = "reli"
        addList.prepend(restoredTask);
    
        // 3. 重新绑定删除功能
        const deleteBtn = restoredTask.querySelector('.delete');
        deleteBtn.addEventListener('click', function () {
            moveToTrash(restoredTask); // 将任务移动到回收站
            display()
        });
    
        // 4. 重新绑定已读功能
        const read = restoredTask.querySelector('.finish');
        read.addEventListener('click', function () {
            // 使用 restoredTask 作为上下文来查找子元素
            const text = restoredTask.querySelector('.text');
            const icon = restoredTask.querySelector('.icon-duigou');
    
            // 若已经是已读状态，则恢复为未读
            if (icon.style.display === 'inline') {
                icon.style.display = 'none';
                text.classList.remove('strikethrough');
                read.style.backgroundColor = 'white';
                restoredTask.style.backgroundColor = '#cd9aff';
            } else {
                // 否则设置为已读
                icon.style.display = 'inline';
                text.classList.add('strikethrough');
                read.style.backgroundColor = 'rgb(86, 89, 245)';
                restoredTask.style.backgroundColor = '#e8d2ff';
            }
            saveToLocalStorage();
        });

        // 6. 从回收站移除
        trashItems.splice(index, 1);
        saveToLocalStorage();
    
        // 7. 刷新回收站显示
        renderTrash();
        display();
    }

    //永久删除
    if (e.target.classList.contains('DEL')) {
        
        // 1. 确认删除
        if (!confirm('确定要永久删除吗？')) return;

        // 2. 从数组移除

        trashItems.splice(index, 1);
        saveToLocalStorage();

        // 3. 移除界面元素
        itemElement.remove();
    }
});

//全部恢复
allRestore.addEventListener('click',function(){
    const conf = confirm("确定全部恢复吗？")
    if(conf){
        for(let index = 0;index<trashItems.length;index++){
            // 1. 获取原始HTML
            const originalHTML = trashItems[index].html;
       
            // 2. 重新插入到任务列表
            const tempLi = document.createElement('li');
            tempLi.innerHTML = originalHTML;
        
            const restoredTask = tempLi.firstElementChild;//插入原列表头部
            addList.prepend(restoredTask);
        
            // 3. 重新绑定删除功能
            const deleteBtn = restoredTask.querySelector('.delete');
            deleteBtn.addEventListener('click', function () {
                moveToTrash(restoredTask); // 将任务移动到回收站
            });
        
            // 4. 重新绑定已读功能
            const read = restoredTask.querySelector('.finish');
            read.addEventListener('click', function () {
                // 使用 restoredTask 作为上下文来查找子元素
                const text = restoredTask.querySelector('.text');
                const icon = restoredTask.querySelector('.icon-duigou');
        
                // 若已经是已读状态，则恢复为未读
                if (icon.style.display === 'inline') {
                    icon.style.display = 'none';
                    text.classList.remove('strikethrough');
                    read.style.backgroundColor = 'white';
                    restoredTask.style.backgroundColor = '#cd9aff';
                } else {
                    // 否则设置为已读
                    icon.style.display = 'inline';
                    text.classList.add('strikethrough');
                    read.style.backgroundColor = 'rgb(86, 89, 245)';
                    restoredTask.style.backgroundColor = '#e8d2ff';
                }
                saveToLocalStorage();
            });
       }
    } 
    //清空回收站
    trashItems = []
    //保存本地存储
    saveToLocalStorage()
    //刷新回收站显示
    renderTrash()
    //判断当前页面状态
    display()
})

// 清空回收站
allDelFover.addEventListener('click',function(){
    let conf = confirm("确定要清空吗？清空后不可恢复！")
    if(conf){
        trashItems = []
        allDelFover.classList.add('disabled')
        allRestore.classList.add('disabled')
    }
    saveToLocalStorage()
    display()
    renderTrash()
})


